<template>
  <el-row style="height: 89px; background-color: #00bbff">
    <el-col :span="3" class="text-center pt-4 pb-3">
      <span class="fs-4">校园答疑互动平台</span>
    </el-col>
    <el-col :span="2" class="text-center pt-4 pb-4">
      <el-button
        type="primary"
        class="pt-3 pb-3 fs-4"
        @click="this.$router.push('/')"
        >首页</el-button
      >
    </el-col>
    <el-col :span="2" class="text-left pt-4 pb-4">
      <el-button
        type="primary"
        class="pt-3 pb-3 fs-4"
        @click="this.$router.push('/Doc')"
        >提问吧</el-button
      >
    </el-col>
    <el-col :span="6" class="text-left pt-4 pb-4">
      <el-input placeholder="请输入搜索内容" v-model="searchVal">
        <template #append>
          <el-button type="Primary" plain @click="this.$router.push('/Select')">
            <el-icon><search /></el-icon>
          </el-button>
        </template>
      </el-input>
    </el-col>
    <el-col :span="1" class="text-center pt-4 pb-4">
      <el-font class="fs-5">天气</el-font>
    </el-col>
    <el-col :span="2" class="text-center pt-2 pb-2">
      <el-font class="fs-6">今日</el-font>
    </el-col>
    <el-col :span="2" class="text-center pt-2 pb-2">
      <el-font class="fs-6">明日</el-font>
    </el-col>
    <el-col :span="2" class="text-center pt-4 pb-4">
      <div v-if="loginstatus">
        <el-font>欢迎您</el-font>
        <img
          :src="photo"
          style="width: 6rem; heighr: 6rem"
          @click="this.$router.push('/person')"
        />
      </div>
      <div v-else>
        <el-button
          type="primary"
          class="pt-3 pb-3 fs-4"
          @click="this.$router.push('/login')"
          >登录</el-button
        >
      </div>
    </el-col>
    <el-col :span="2" class="text-center pt-4 pb-4">
      <el-dropdown split-button type="primary" style="w-100">
        个人信息
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>详细信息</el-dropdown-item>
            <el-dropdown-item @click="this.$router.push('/person')"
              >修改信息</el-dropdown-item
            >
            <el-dropdown-item>安全设置</el-dropdown-item>
            <el-dropdown-item>我的提问</el-dropdown-item>
            <el-dropdown-item @click="this.$router.push('/')">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <el-col :span="2" class="text-center pt-1 pb-2">
      <img src="photo" style="width: 5rem; height: 5rem" />
    </el-col>
  </el-row>
</template>

<script>
import auth from "@/tools/auth.js";
import { Search } from "@element-plus/icons-vue";
export default {
  name: "HomeHeader",
  emits: ["getSearchVal"],
  components: {
    Search,
  },
  data() {
    return {
      loginstatus: null,
      searchVal: null, //搜索值
      photo: null,
    };
  },
  methods: {
    getNoteLi() {
      //将searchVal值传给父组件
      //this.表示调用当前项目的vue实例
      //$emit表示发起自定义事件的函数
      //发起一个名叫‘getsearchVal’的事件
      this.$router.push("/Select" + this.searchVal);
    },
    isLogin() {
      this.loginstatus = auth.isLogin();
    },
  },
  mounted() {
    this.isLogin();
    this.photo = auth.getLoginUser().photo;
  },
};
</script>

<style>
</style>